<template>
	<view class="" v-if="info.id">
		<!-- 		<u-navbar title-color="#fff" title=" " :background="background" :border-bottom="false" :is-back="false">

		</u-navbar> -->
		<view class="u-flex p15 module-action">
			<view class="act-block" @click="toBack">

				<u-icon name="arrow-left" style="color: #fff;"></u-icon>
			</view>
			<view class="act-block ml10" @click="toHome">

				<u-icon name="home" style="color: #fff;"></u-icon>
			</view>
			<view class="act-block ml10" @click="toCart">
				<u-icon name="shopping-cart" style="color: #fff;"></u-icon>
			</view>
		</view>
		<view>


			<swiper class="swiper" style="height:460px" circular @change="bannerChange">
				<swiper-item v-if="info.file">
					<view v-if="showVideo">

						<video id="myVideo" :autoplay="true" controls :src="info.file"
							style="width: 100%;height:460px"></video>
					</view>
					<view v-else @click="showVideo=true" style="position: relative">
						<view class="ic-video">
							<u-icon name="play-circle"></u-icon>
						</view>
						<image :src="info.picUrl" style="width: 100%;height:460px" mode="aspectFit"></image>
					</view>
				</swiper-item>
				<swiper-item v-for="(item,index) in info.sliderPicUrls" :key="index">
					<image :src="item" style="width: 100%;height:460px" mode="aspectFit"></image>
				</swiper-item>
			</swiper>

			<!-- 			<view>

				<u-swiper @change="bannerChange" @click="toBanner(curBanner)" name="picUrl" :list="info.sliderPicUrls"
					height="460">
				</u-swiper>
			</view> -->

			<view class="vip-tips u-flex p12 pt8 pb8 fz12 u-f-jsb" style="color: #8F6136;">
				<view>
					开通会员卡预计可省<span style="color: #FE3307;">￥240</span>起
				</view>
				<view class="u-flex">
					加入会员
					<u-icon name="arrow-right" class="ml3"></u-icon>
				</view>
			</view>
		</view>
		<view class="p12">
			<view class="u-flex u-f-jsb">
				<view class="fz20 u-font-bold" style="color: #FE3307;">￥{{info.price}}</view>
				<view class="fz12 c9">已售 {{info.salesCount}}</view>
			</view>
			<view class="u-flex fz12 c9">
				价格<span style="text-decoration: line-through;">￥{{info.marketPrice}}</span>
			</view>
			<view class="u-flex u-f-jsb">
				<view class="fz16 u-font-bold">{{info.name}}</view>
				<view class="btn-diy u-flex fz12 u-font-bold c255" @click="showSku=true" v-if="info.type==1 || info.type==2">
					<image src="../../static/image/ic-diy.png" style="width: 40rpx;height: 28rpx;margin-right: 8rpx;">
					</image>
					开始定制
				</view>
			</view>
			<view class="bt mt20 pt20 pb20 u-f-jsb u-flex fz13" @click="showSku=true">
				<view class="u-flex">

					<span class="c6 mr10">规格</span>
					<span>请选择规格</span>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="bt pt20 pb20 u-f-jsb u-flex fz13">
				<view class="u-flex">

					<span class="c6 mr10">运费</span>
					<span>免运费</span>
				</view>
			</view>
			<view class="bt pt20 pb20 u-f-jsb u-flex fz13">
				<view class="u-flex">
					<span class="c6 mr10">服务</span>
					<span>支持退换·7天无理由退货·快递发货</span>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="bt pt20 pb20 u-f-jsb u-flex fz13 bm">
				<view class="u-flex">
					<image src="../../static/image/img-store.png" style="width: 128rpx;height: 128rpx;"></image>
					<view class="pl10">
						<image src="../../static/image/logo2.png" style="width: 356rpx;height: 60rpx;"></image>
						<view class="u-flex fz12 c9 mt5">
							<u-icon name="checkmark-circle" style="color: #3cdd8e;" class="mr2"></u-icon>企业认证
							<u-icon name="checkmark-circle" style="color: #3cdd8e;" class="mr2 ml10"></u-icon>品牌认证
						</view>
					</view>
				</view>
				<view class="brs10 btn-store u-flex fz12">
					<image src="../../static/image/ic-store.png" class="w14 h14 mr5"></image>
					全部宝贝
				</view>
			</view>
		</view>
		<view class="">
			<view class="p12">商品详情</view>
			<u-parse :html="info.description"></u-parse>
		</view>


		<u-tabbar active-color="#70B52C" v-model="curTab" @change="tabbarChange" :list="tabbarList"
			:mid-button="true"></u-tabbar>

		<u-popup v-model="showSku" mode="bottom" :closeable="true">
			<view v-if="showSku">
				<view class="p20">
					<view class="u-f-justify fz14 u-font-bold">选择规格</view>
					<view class="u-flex mt15" style="align-items: flex-start;">
						<image class="" :src="curSku.picUrl || info.picUrl" style="width: 180rpx;height: 180rpx;"></image>
						<view class="pl10">
							<view class="fz14 u-font-bold u-f-jsb u-flex u-line-1">
								{{info.name}}
							</view>
							
							<view class="fz12 c9 u-f-jsb u-flex mt10">
								{{curSku.skuName}}
							</view>
							<view style="color: #FE3307;" class="u-font-bold fz16 mt5">
								￥{{curSku.price}}
							</view>
						</view>
					</view>
					<view class="mt10">
						<u-tabs :list="cateList" active-color="#70B52C" :is-scroll="false" :current="current"
							@change="change"></u-tabs>
						<scroll-view scroll-y="true" class="specs mt20" style="max-height: 600rpx;">
							<template v-if="!showDiy">
								
								<view class="specs mb16" v-for="(item, index) in info.groupList[current].propertyList" :key="index">
									<view class="specs-hd p-20-0">
										<text class="f12 c6">{{ item.propertyName }}</text>
									</view>
									<view class="u-flex" style="flex-wrap: wrap;" v-if="item.valueList">
										<view :class="['sku-item',item.curIndex==index1?'on':'']"
											v-for="(item1,index1) in item.valueList" :key="index1"
											@click="selectSku(index,index1)">
											<image v-if="item1.valuePicture" :src="item1.valuePicture" style="width: 100%;height: 100rpx;display: block;margin: 0 0 10rpx;"></image>
											{{ item1.valueName }}
										</view>
									</view>
								</view>
							</template>
							<template v-else>
								<view class="specs mb16 spec-diy" >
									
									<view class="u-flex" style="flex-wrap: wrap;">
										<view class="sku-item" @click="toDiy(1)">
											<image src="../../static/image/ic-diy1.png" style="width:50rpx;height:50rpx;display: block;margin: 0 auto 20rpx;"></image>
											平面打印
										</view>
										<view class="sku-item" @click="toDiy(2)">
											<image src="../../static/image/ic-diy2.png" style="width:50rpx;height:50rpx;display: block;margin: 0 auto 20rpx;"></image>
											立体文字
										</view>
										<view class="sku-item" @click="toDiy(3)">
											<image src="../../static/image/ic-diy3.png" style="width:50rpx;height:50rpx;display: block;margin: 0 auto 20rpx;"></image>
											添加挂件
										</view>
									</view>
								</view>
							</template>
							
						</scroll-view>
					</view>
					<!-- <view class="">
					<view class="f12 c6 mb15">数量</view>
					<u-number-box :input-width="60" :input-height="50" :min="1" :size="30" v-model="skuNum"
						@change="skuNumChange"></u-number-box>
				</view> -->

				</view>
				<view class="module-btn mt10 u-flex p20 bt" v-if="!showDiy">
					<button type="primary" @click="buyNow" style="background: #70B52C;"
						class="btn brs5 u-f1 mr5">
						<!-- ￥169.95 -->
						立即购买</button>
					<button type="primary" @click="addCart" style="background: #70B52C;"
						class="btn brs5 u-f1 ml5">加入购物车</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showSku: false,
				showVideo: false,
				skuNum: 1,
				cateList: [],
				current: 0,
				showDiy:false,
				curSku:{},
				info: {},
				curTab:2,
				tabbarList:[
					{
							iconPath: "https://diy.cdevelopment.cn/admin-api/infra/file/18/get/09775f24a1d92c9e0191b2b32e03835a3b4101e07fc68f471c33eda6b8fa2d01.png",
							selectedIconPath: "https://diy.cdevelopment.cn/admin-api/infra/file/18/get/f07c8b9ff4261bd918eda0b40f0d55dedd8be74d83b0442fd8277ce5a560cbce.png",
							text: '客服',
						},
						{
							iconPath: "shopping-cart",
							selectedIconPath: "shopping-cart",
							text: '购物车',
						},
						{
							iconPath: "https://diy.cdevelopment.cn/admin-api/infra/file/18/get/00dd0b51adc323773b95690f6ae364b4a6e9fc1fe581cd7c0b39604643c2f92a.png",
							selectedIconPath: "https://diy.cdevelopment.cn/admin-api/infra/file/18/get/00dd0b51adc323773b95690f6ae364b4a6e9fc1fe581cd7c0b39604643c2f92a.png",
							text: '开始定制',
							midButton: true,
						},
						{
							iconPath: "star",
							selectedIconPath: "star",
							text: '收藏',
							customIcon: false,
						},
						{
							iconPath: "https://diy.cdevelopment.cn/admin-api/infra/file/18/get/ba851763cbbb7facf14ab3dd5a87b4e81cda8cac77e68280262d3cbc517b0e1c.png",
							selectedIconPath: "https://diy.cdevelopment.cn/admin-api/infra/file/18/get/0c2ac01398e15445463e0d1d7057e77513d3e80d8147b198853b81364920094b.png",
							text: '分享',
						},
					
				]

			}
		},
		onLoad(e) {
			this.getInfo(e.id)
		},
		onShow() {},

		methods: {
			tabbarChange(e){
				console.log(e)
			},
			toDiy(){
				uni.navigateTo({
					url:'/pages/diy/index?id='+this.curSku.id
				})
			},
			bannerChange() {
				this.pauseVideo()
			},
			pauseVideo() {
				uni.createSelectorQuery().select('#myVideo').boundingClientRect(function(rect) {
					uni.createVideoContext('myVideo', this).pause();
				}).exec();
			},
			change(e) {
				this.current = e
				this.showDiy=false
				if(this.cateList[e].name=='自主DIY'){
					this.showDiy=true
				}
			},

			selectSku(idx, idx1) {
				this.info.groupList[this.current].propertyList[idx].curIndex = idx1
				console.log(this.info.groupList,11111)
				this.getSkuValue()
			},
			
			getSkuValue(){
				let valueIds=[]
				this.info.groupList.some(item=>{
					item.propertyList.some(item1=>{
						valueIds.push(item1.valueList[item1.curIndex].valueId)
					})
					
				})
					this.$api.productSku({
						spuId:this.info.id,
						valueIds:String(valueIds)
					}, res => {
						if (res.code == 200) {
							this.curSku=res.data
							
						}
					})
				
			},
			getInfo(id) {
				this.$api.productInfo({
					id
				}, res => {
					if (res.code == 200) {
						this.info = res.data
						this.cateList = []
						this.info.groupList.some(item => {
							let i = {
								name: item.groupName
							}
							this.cateList.push(i)
							item.propertyList.some(spc => {
								this.$set(spc, 'curIndex', 0)
							})
						})
						
						if(this.info.type==1 || this.info.type==2){
							let i={
								name:'自主DIY'
							}
							this.cateList.push(i)
						}
						
						this.getSkuValue()
					}
				})
			},
			
			
			addCart: function(e) { //加入购物车
			if (!this.curSku.id) {
				uni.showToast({
					title: '请选择规格',
					icon: 'none'
				});
				return
			}
				this.$api.cartAdd({
					skuId: this.curSku.id,
					count: this.skuNum
				}, res => {
					if (res.code == 200) {
			
						uni.showToast({
							title: '添加成功',
							icon: 'none'
						});
					} else {
			
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				})
			},
			buyNow: function() { //立即购买
			
				if (!this.curSku.id) {
					uni.showToast({
						title: '请选择规格',
						icon: 'none'
					});
					return
				}
				this.$api.buyNow({
					skuId: this.curSku.id,
					count: this.skuNum
				}, res => {
					if (res.code == 200) {
						let ids = res.data
						this.$api.orderCheckSettlement({
							cartIds: ids,
						}, res => {
							if (res.code == 200) {
			
								uni.navigateTo({
									url: '/pages/product/confirm?cartIds=' + ids
								})
							} else {
			
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
							}
						})
			
					} else {
			
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			
			},
		}
	}
</script>

<style lang="scss">
	.vip-tips {
		height: 68rpx;
		background: linear-gradient(135deg, #F8F7F6 0%, #FDEDDA 50%, #FAE2DB 100%);
	}

	.ic-video {
		position: absolute;
		top: 50%;
		left: 50%;
		font-size: 60rpx;
		z-index: 2;
		font-size: 80rpx;
		transform: translate(-50%, -50%);
	}

	.module-action {
		position: fixed;
		top: 36px;
		left: 0;
		right: 0;
		z-index: 10;
	}

	.act-block {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 64rpx;
		height: 64rpx;
		font-size: 36rpx;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.1);
	}

	.btn-diy {
		background: #76BC21;
		border-radius: 16rpx;
		padding: 26rpx 28rpx;
	}

	.btn-store {
		background: #F4F4F4;
		padding: 20rpx 10rpx;
	}

	.sku-item {
		border-radius: 8rpx;
		border: 1px solid #888;
		width: 200rpx;
		padding: 10rpx;
		color: #888;
		font-size: 24rpx;
		text-align: center;
		margin-top: 24rpx;
		margin-right: 24rpx;

		&.on {
			border: 1px solid #70B52C;
			color: #70B52C;
		}
	}
	.spec-diy{
		min-height: 300rpx;
		.sku-item{
			border: none;
			background: rgba(25,41,28,0.05);
			color: #19291C;
			padding: 40rpx 20rpx;
		}
	}
</style>